<template>
    <div>
        <searchBox @handleSearch="handleQuery" @handleReset="resetQuery">
            <el-form :model="searchParams.param" ref="doMainForm" :inline="true">
                <el-form-item label="品牌名称" prop="domainName">
                    <el-input v-model.trim="searchParams.param.domainName" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="服务商" prop="providerId">
                    <el-select v-model="searchParams.param.providerId" placeholder="请选择" style="width: 200px" clearable>
                        <el-option v-for="(item, index) in serviceProvider" :key="index" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务商账号" prop="serverId">
                    <el-select v-model="searchParams.param.serverId" placeholder="请选择" style="width: 200px" clearable>
                        <el-option v-for="(item, index) in servicerAccount" :key="index" :label="item.providerName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="searchParams.param.status" placeholder="请选择" style="width: 200px" clearable>
                        <el-option v-for="(item, index) in sys_site_status" :key="index" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </searchBox>
        <el-button type="primary" @click="addSiteDomain">新增</el-button>
        <el-table :data="tableList" style="height: calc(100vh - 280px)" :row-style="rowStyle">
            <el-table-column prop="id" label="ID" width="100"/>
            <el-table-column prop="providerName" label="服务商" />
            <el-table-column label="域名" >
                <template #default="scope">
                    <el-link :href="scope.row.domainName" target="_blank" type="primary">{{ scope.row.domainName
                    }}</el-link>
                </template>
            </el-table-column>

            <el-table-column prop="id" label="绑定站点" width="300">
                <template #default="scope">
                    <el-space spacer=" ">
                        <el-text>{{ scope.row.websitesName }}</el-text>
                    </el-space>
                </template>
            </el-table-column>

            <el-table-column prop="serverName" label="服务商账号" />
            <el-table-column prop="id" label="开始时间 - 到期时间" align="center" width="390">
                <template #default="scope">
                    <el-space spacer="-">
                        <el-text :type="scope.row.current">{{ scope.row.newStartTime }}</el-text>
                        <el-text :type="scope.row.current">{{ scope.row.newEndTime }}</el-text>
                    </el-space>
                </template>
            </el-table-column>
            <el-table-column label="到期状态">
                <template #default="scope">
                    <span v-if=" scope.row.current"> {{ scope.row.current === 'warning' ? "即将过期" : "过期" }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="newStatus" label="当前状态" align="center" />
            <el-table-column prop="remark" label="备注" width="200">
                <template #default="scope">
                    <el-tooltip effect="dark" placement="top-start">
                        <template #content>
                            <div style="max-width: 500px;">
                                {{ scope.row.remark }}
                            </div>
                        </template>
                        <el-text line-clamp="2">
                            {{ scope.row.remark }}
                        </el-text>
                    </el-tooltip>
                </template>
            </el-table-column>




            <el-table-column prop="newLastModified" label="更新时间" align="center" width="180" />
            <el-table-column prop="id" label="操作" align="center" width="150" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" @click="choseEdit(scope.row)">编辑</el-button>
                    <el-button link type="danger" @click="handleDelete(scope.row)"
                        v-if="!scope.row.showDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :total="total" :limit="searchParams.pageSize" :page="searchParams.pageNum"
            @pagination="handlePageChange">
        </Pagination>
        <AddSiteDomain :publicItem="publicFrom" :dialogVisible="openDomain" @handleServiceClose="handleServiceClose"
            @handleServiceSure="handleServiceSure"></AddSiteDomain>

    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import AddSiteDomain from "./components/addSiteDomain.vue"

const { proxy } = getCurrentInstance();
// 查询参数
const searchParams = ref({
    pageNum: 1,
    pageSize: 20,
    param: {
        domainName: "",//域名
        providerId: null,
        serverId: null,
        status: null,
    },
});
const total = ref(0)
const tableList = ref([])//域名列表
const servicerAccount = ref([])//服务商账号
const serviceProvider = ref([])//服务商
const publicFrom = ref({})
const openDomain = ref(false)
onMounted(() => {
    getList();
    getSearch()
})
const getList = () => {
    site.general.sitedomainList({
        data: searchParams.value
    }).then(res => {
        total.value = res.total
        if (res.data?.length) {
            res.data = res.data.map(code => {
                return {
                    ...code,
                    showDelete: code.status === 1 && code.websiteIds?.length > 0,
                    current: getCurrent(code),
                    newStatus: code.status === 1 ? '启用' : '停用',
                    newStartTime: proxy.DateTime(code.startTime),
                    newEndTime: proxy.DateTime(code.endTime),
                    newLastModified: proxy.DateTime(code.lastModified),
                    websitesName: code.websites ? code.websites[0].name : '',
                }
            })
        }
        tableList.value = res.data
    })

}
const getSearch = () => {
    let from = {
        pageNum: 1,
        pageSize: 999,
        param: {}
    };
    site.general
        .siteserverproviderList({
            data: from,
        })
        .then((res) => {
            serviceProvider.value = res.data;

        })
    site.general
        .sitecloudserverList({
            data: from,
        })
        .then((res) => {
            servicerAccount.value = res.data;
        })
}

const handleQuery = () => {
    getList()
}
const resetQuery = () => {
    proxy.resetForm("doMainForm");
    getList()
}
// 分页
const handlePageChange = (newPage) => {
    searchParams.value.pageNum = newPage.page;
    searchParams.value.pageSize = newPage.limit;
    getList();
};
const addSiteDomain = () => {
    openDomain.value = true
    publicFrom.value = {}
}
const choseEdit = (row) => {
    openDomain.value = true
    publicFrom.value = row
}
const handleDelete = (row) => {
    proxy.$modal
        .confirm("是否确认删除此数据类型？")
        .then(() => {
            site.general.sitedomainRemovebatchbyids(
                {
                    data: {
                        ids: [row.id]
                    }
                }
            ).then((res) => {
                getList();
                proxy.$modal.msgSuccess("删除成功");
            });
        })
}
const handleServiceClose = () => {
    openDomain.value = false
    publicFrom.value = {}
}
const handleServiceSure = () => {
    openDomain.value = false
    getList();

}

const getCurrent = (row) => {
    let CurrentTime

    let futureTimestamp;
    let daysToAdd = 14;
    let currentTimestamp = new Date().getTime();
    const millisecondsInADay = 24 * 60 * 60 * 1000;
    CurrentTime = Math.floor(currentTimestamp / 1000);
    if (CurrentTime >= row.endTime) return 'danger'//当前时间大于过期时间//
    /**
     * 当前时间=>过期时间，颜色标红色
     * 
     * 当前时间+14天《=过期时间 false
     * 当前时间+14天=过期时间 false
     * 当前时间+14天>过期时间 true：颜色标橙色警告
    */
    futureTimestamp = currentTimestamp + daysToAdd * millisecondsInADay;
    futureTimestamp = Math.floor(futureTimestamp / 1000);
    // console.log(row.endTime, "14天后的日期是: ", futureTimestamp);
    if (futureTimestamp < row.endTime) {
        return '';
    } else if (currentTimestamp > row.endTime) {
        return 'warning';
    } else {
        return '';
    }
};
const rowStyle = ({ row }) => {
    if (row.current === 'danger') {
        return { color: "#f56c6c" }; // 设置背景色和文本颜色
    } else if (row.current === 'warning') {
        return { color: "#E6A23C" }; // 设置背景色和文本颜色
    } else {
        return {};
    }
};
const sys_site_status = ref([
    {
        name: "正常",
        id: 1,
    },
    {
        name: "停用",
        id: 0,
    },
]); //站点状态
</script>